<template>
  <!--承运商数据统计-->
  <div class="statistic-index">
    <div class="statistic-body">
      <module-title context="数据统计"/>

      <div class="container" style="width:1600px;height: 400px;float: left">
        <div ref="main" style="width:1600px;height: 400px;margin-top: 20px"></div>
      </div>
    </div>

  </div>
</template>

<script>
import ModuleTitle from "@/components/title/ModuleTitle";

export default {
  name: "CarriersStatistics",
  components: {ModuleTitle},
  props: {
    ModuleTitle,

  },
  data() {
    return {}
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {

      const chartDom = this.$echarts.init(this.$refs.main)
      const option = {
        legend: {},
        tooltip: {},
        dataset: { // order  notSettled  settled

          dimensions: ['product', '下单', '客户未结算', '客户已结算', '司机未结算', '司机已结算'],
          source: [
            ['1月', 11.3, 21.8, 93.7, 21.8, 32.7],
            ['2月', 43.3, 11.8, 33.7, 21.8, 23.7],
            ['3月', 12.3, 21.8, 93.7, 11.8, 11.7],
            ['4月', 43.3, 21.8, 12.7, 61.8, 93.7],
            ['5月', 43.3, 21.8, 43.7, 21.8, 23.7],
            ['6月', 43.3, 21.8, 93.7, 11.8, 93.7],
            ['7月', 43.3, 21.8, 54.7, 41.8, 53.7],
            ['8月', 43.3, 21.8, 93.7, 21.8, 33.7],
            ['9月', 49.3, 21.8, 13.7, 51.8, 32.7],
            ['10月', 43.3, 21.8, 93.7, 21.8, 93.7],
            ['11月', 54.3, 21.8, 23.7, 21.8, 21.7],
            ['12月', 43.3, 21.8, 93.7, 21.8, 63.7],
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
      };

      option && chartDom.setOption(option);


      // 监听饼状图点击事件
      chartDom.on('click', function (params) {
        // 获取被点击项的名称和数值
        var name = params.name;
        var value = params.value;

        // 在控制台输出被点击项的信息
        console.log(name + ' 被点击了，数值为：' + value);
      });

    }
  }
}
</script>

<style scoped lang="scss">

.statistic-index {
  width: 100%;

  .statistic-body {
    width: 99%;
    margin-left: 1%;
  }

}


</style>